<template>
  <div id="dswd-home-fourth">
    <div v-if="device==='desktop'" class="dswd-home-fourth">
      <div class="fourth-top" />
      <div class="fourth-icon">
        <img src="../../assets/image/home/fourth/more-icon.png" alt="more-icon">
      </div>
      <div class="fourth-sub-title">多专业协作，多维度优化、多成果展示</div>
      <div class="fourth-wrap">
        <div class="left-block">
          <img src="../../assets/image/home/fourth/img_wudazhuanye.png" alt="img_wudazhuanye">
        </div>
        <div class="right-block">
          <div class="right-content">
            <div class="right-title">协同设计</div>
            <div class="right-sub-title">五大专业协同操作</div>
            <div class="right-dividing-line" />
            <div class="right-headlines">10倍</div>
            <div class="right-sub-headlines">协同效率提升</div>
          </div>
          <div class="right-bg">
            <img src="../../assets/image/home/fourth/arrowheads.png" alt="arrowheads">
          </div>
        </div>
      </div>
      <div class="fourth-content">
        <div class="content-sgttz">
          <div class="left">
            <img src="../../assets/image/home/fourth/sgttz.png" alt="sgttz">
          </div>
          <div class="right">
            <div class="right-title">施工图设计个性化定制</div>
            <div class="right-sub-title">根据各地标准及不同用户的建筑设计需求，个性化设计图纸</div>
            <div class="right-dividing-line" />
          </div>
        </div>
        <div class="content-ydsj">
          <div class="left">
            <div class="left-title">云端升级、轻量无忧</div>
            <div class="left-sub-title">软件云端迭代，数据安全高效，实时联动互通</div>
            <div class="left-dividing-line" />
          </div>
          <div class="right">
            <img src="../../assets/image/home/fourth/ydsj.png" alt="ydsj">
          </div>
        </div>
      </div>
      <div class="bottom-dividing-line" />
    </div>
    <div v-if="device==='ipad'" class="dswd-p-home-fourth">
      <div class="fourth-top" />
      <div class="fourth-icon">
        <img src="../../assets/image/home/fourth/more-icon.png" alt="more-icon">
      </div>
      <div class="fourth-sub-title">多专业协作，多维度优化、多成果展示</div>
      <div class="fourth-wrap">
        <div class="top-block">
          <img src="../../assets/image/home/fourth/img_wudazhuanye-m.png" alt="img_wudazhuanye">
        </div>
        <div class="block-divide" />
        <div class="bottom-block">
          <div class="bottom-content">
            <div class="bottom-title">协同设计</div>
            <div class="bottom-sub-title">五大专业协同操作</div>
            <div class="bottom-dividing-line" />
            <div class="bottom-headlines">10倍</div>
            <div class="bottom-sub-headlines">协同效率提升</div>
          </div>
          <div class="bottom-bg">
            <img src="../../assets/image/home/fourth/arrowheads-m.png" alt="arrowheads">
          </div>
        </div>
      </div>
      <div class="fourth-content">
        <div class="content">
          <div class="top">
            <div class="top-title">施工图设计个性化定制</div>
            <div class="top-sub-title">根据各地标准及不同用户的建筑设计需求，个性化设计图纸</div>
          </div>
          <div class="bottom">
            <img src="../../assets/image/home/fourth/sgttz.png" alt="sgttz">
          </div>
        </div>
        <div class="content">
          <div class="top">
            <div class="top-title">云端升级、轻量无忧</div>
            <div class="top-sub-title">软件云端迭代，数据安全高效，实时联动互通</div>
          </div>
          <div class="bottom">
            <img src="../../assets/image/home/fourth/ydsj.png" alt="ydsj">
          </div>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
    <div v-if="device==='mobile'" class="dswd-m-home-fourth">
      <div class="fourth-top" />
      <div class="fourth-icon">
        <img src="../../assets/image/home/fourth/more-icon.png" alt="more-icon">
      </div>
      <div class="fourth-sub-title">多专业协作，多维度优化、多成果展示</div>
      <div class="fourth-wrap">
        <div class="top-block">
          <img src="../../assets/image/home/fourth/img_wudazhuanye-m.png" alt="img_wudazhuanye">
        </div>
        <div class="block-divide" />
        <div class="bottom-block">
          <div class="bottom-content">
            <div class="bottom-title">协同设计</div>
            <div class="bottom-sub-title">五大专业协同操作</div>
            <div class="bottom-dividing-line" />
            <div class="bottom-headlines">10倍</div>
            <div class="bottom-sub-headlines">协同效率提升</div>
          </div>
          <div class="bottom-bg">
            <img src="../../assets/image/home/fourth/arrowheads-m.png" alt="arrowheads">
          </div>
        </div>
      </div>
      <div class="fourth-content">
        <div class="content">
          <div class="top">
            <div class="top-title">施工图设计个性化定制</div>
            <div class="top-sub-title">根据各地标准及不同用户的建筑设计需求，个性化设计图纸</div>
          </div>
          <div class="bottom">
            <img src="../../assets/image/home/fourth/sgttz.png" alt="sgttz">
          </div>
        </div>
        <div class="content">
          <div class="top">
            <div class="top-title">云端升级、轻量无忧</div>
            <div class="top-sub-title">软件云端迭代，数据安全高效，实时联动互通</div>
          </div>
          <div class="bottom">
            <img src="../../assets/image/home/fourth/ydsj.png" alt="ydsj">
          </div>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {}
    },
    computed: {
      ...mapState({
        device: (state) => state.app.device
      })
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/home/fourth.scss";
</style>
